import React,{useState,useRef,useEffect} from "react";
import SlateTemp from "./SlateTemp";
import Mentions from "./Mentions";
const initialValue = [
	{
		type: "paragraph",
		children: [
			{
				text: "This example shows how you might implement a simple ",
			},
			{
				text: "@-mentions",
				bold: true,
			},
		],
	},
	{
		type: "paragraph",
		children: [
			{
				type: "mention",
				character: "R2-D2",
				children: [{ text: "", bold: true }],
			},
			{ text: " or " },
			{
				type: "mention",
				character: "Mace Windu",
				children: [{ text: "" }],
			},
			{ text: "!" },
		],
	},
];
const SlateEditor = () => {
	// const [value,setValue] = useState(initialValue)
	const [data,setData] = useState([{
		type: "paragraph",
		children: [
			{
				text: "This example shows how you might implement a simple ",
			},
		],
	}])

	const onChange = (val=[])=>{
		console.log('val',val);
		setData(val)
		sessionStorage.setItem('initValue',JSON.stringify(val))
	}
	useEffect(()=>{
		const initValue = JSON.parse(sessionStorage.getItem('initValue'))
		console.log('initValue==',initValue);
		setData(initValue||[])
	},[])
	let n = 0
	const menRef = useRef(null)
	return (
		<div style={{textAlign:'left'}}>
			<div><button onClick={()=>{
				console.log(menRef);
				if (menRef.current) {
					n++
					menRef.current?.addNode(`${n}${n}${n}`,`${n}${n}`)
				}
				// menRef&&menRef.current.addNode('123')
			}}>点击添加</button></div>
			<div
				style={{ padding: "10px", margin: "10px 0", backgroundColor: "#eee" }}
			>
				<SlateTemp ref={menRef} value={data} setValue={onChange}/>
			</div>
			<div
				style={{ padding: "10px", margin: "10px 0", backgroundColor: "#eee" }}
			>
				<Mentions  />
			</div>
		</div>
	);
};

export default SlateEditor;
